/* MusicNet Alignment Tool
 *
 * Copyright (c) 2010 Joe Lambert
 * 
 * Permission is hereby granted, free of charge, to any person obtaining
 * a copy of this software and associated documentation files (the
 * "Software"), to deal in the Software without restriction, including
 * without limitation the rights to use, copy, modify, merge, publish,
 * distribute, sublicense, and/or sell copies of the Software, and to
 * permit persons to whom the Software is furnished to do so, subject to
 * the following conditions:
 * 
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *  
 */

/** section: alignment 
 * class ListViewUnGrouped < ListView
 * 
 * Specialised ListView for rendering Ungrouped items
 **/

var ListViewUnGrouped = Class.create(ListView, {	
	initialize: function($super, delegate)
	{
		$super(delegate);
		
		var body = document.body;
		
		this.surface.observe('click', function(event){
			
		});
		
		this.surface.observe('mousedown', function(event) { 
			// Ensure the click came from a list element
			var t = event.target;
			
			if(t.localName != 'li')
			{
				t = t.up('li');
				
				if(!t)
					return;
			}
			
			this.start_x = event.pointerX();
			this.start_y = event.pointerY();
			event.stop();
			
			// Only allow dragging of valid items
			var valid_selections = this.getValidSelectedIndexes();
				
			var valid_selections_count = 0;
			
			for(var index in valid_selections)
				valid_selections_count++;
				
			if(valid_selections_count == 0)
				return;
			
			var drag_marker = Builder.node('div', {id: 'drag_marker', style: "display: none; zIndex: 1000; position: absolute; top: "+this.start_y+"px; left: "+this.start_x+"px"}, valid_selections_count+" item"+(valid_selections_count>1?'s':''));
			
			body.insert(drag_marker); // TODO: ensure this is IE compatible
			
			body.observe('mousemove', function(event){
				event.stop();
				window.list_dragging = true;
				
				drag_marker.show();
				drag_marker.setStyle({left: event.pointerX()-drag_marker.getWidth()+'px', top: event.pointerY()-drag_marker.getHeight()+'px'});
				
				body.observe('mouseup', function(event) {
					body.stopObserving('mousemove');
					body.stopObserving('mouseup');
					if($("drag_marker"))
						$("drag_marker").remove();
					window.list_dragging = false;
					
					// Fire a drop event					
					document.fire('group:add', this.getSelectedElements());
				}.bindAsEventListener(this));
			}.bindAsEventListener(this));
		}.bindAsEventListener(this));
		
		this.surface.observe('mouseup', function(event) {
			body.stopObserving('mousemove');
			body.stopObserving('mouseup');
			if($("drag_marker"))
				$("drag_marker").remove();
			window.list_dragging = false;
		}.bindAsEventListener(this));
	},
	
	buildListItem: function($super, item, index)
	{
		var li = $super(item, index);
		
		// new Draggable(li, {
		// 	revert: true,
		// 	onStart: function(){
		// 		window.list_dragging = true;
		// 	},
		// 	onEnd: function(){
		// 		window.list_dragging = false;
		// 		document.fire("group:add", [li]);
		// 	}
		// });
		
		return li;
	}
});